<template>
  <div class="container">
    <!-- tool start -->
    <el-form :model="formInline" label-width="120px" @keyup.enter.native="search">
      <el-row>
        <el-col :span="6">
          <el-form-item :label="$t('m.pick.pickingtaskcode')">
            <el-input maxlength="20" show-word-limit v-model="formInline.pickingtaskcode" placeholder></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('m.out.waveordercode')">
            <el-input maxlength="20" show-word-limit v-model="formInline.waveordercode" placeholder></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('m.state')">
            <el-select v-model="formInline.state" placeholder>
              <el-option v-for="(item,index) in stateOptions" :key="index" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('m.out.storeordercode')">
            <el-input maxlength="20" show-word-limit v-model="formInline.storeordercode" placeholder></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="SKU">
            <el-input maxlength="20" show-word-limit v-model="formInline.productspeccode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('m.in.suppliercode')">
            <el-input maxlength="20" show-word-limit v-model="formInline.suppliercode" placeholder></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('m.in.ordernumber')">
            <el-input maxlength="30" show-word-limit v-model="formInline.ordercode" placeholder></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24" align="right">
          <el-button type="primary" @click="search" v-if="hasPermission('search')">{{$t('m.query')}}</el-button>
          <el-button v-if="hasPermission('assign')" type="primary" @click="appoint">{{$t('m.shelves.appoint')+$t('m.out.pickingusers')}}</el-button>
          <el-button @click="print" v-if="hasPermission('print')">{{$t('m.print')}}</el-button>
          <el-button type="primary" @click="picktaskPopupVisible=true" v-if="hasPermission('picking')">{{$t('m.pick.pickUp')}}</el-button>
        </el-col>
      </el-row>
    </el-form>
    <!-- tool end -->

    <!-- table数据展示 start -->
    <el-table
      ref="table"
      stripe
      empty-text
      fit
      v-loading="tableLoading"
      class="table-wrap single-select-table"
      :data="tableData"
      :row-style="tableRowStyle"
      :row-class-name="tableRowClassName"
      @row-click="rowClick"
      @selection-change="handleSingleSelectionChange">
      <el-table-column align="center" type="selection" width="55"></el-table-column>
      <el-table-column align="center" type="index" :label="$t('m.index')" width="50"></el-table-column>
      <el-table-column align="center" prop="pickingtaskcode" :label="$t('m.pick.pickingtaskcode')">
        <template slot-scope="scope">
          <template v-if="hasPermission('search')">
            <el-button type="text" @click.stop="pickingtaskResult(scope.row)">{{scope.row.pickingtaskcode}}</el-button>
          </template>
          <template v-else>{{scope.row.pickingtaskcode}}</template>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="waveordercode" :label="$t('m.out.waveordercode')"></el-table-column>
      <el-table-column align="center" prop="state" :label="$t('m.state')">
        <template slot-scope="scope">{{scope.row.state|stateFilter(lan)}}</template>
      </el-table-column>
      <el-table-column align="center" prop="pickingtype" :label="$t('m.out.sortingtype')">
        <template slot-scope="scope">{{scope.row.pickingtype|pickingtypeFilter(lan)}}</template>
      </el-table-column>
      <el-table-column align="center" prop="totalqty" :label="$t('m.out.totalqty')"></el-table-column>
      <el-table-column align="center" prop="createdate" :label="$t('m.createdate')">
        <template slot-scope="scope">{{scope.row.createdate|dateFilter}}</template>
      </el-table-column>
      <el-table-column align="center" prop="pickingusers" :label="$t('m.out.pickingusers')"></el-table-column>
      <el-table-column align="center" prop="startpickingdate" :label="$t('m.out.pickingdate')"></el-table-column>
    </el-table>

    <el-pagination background layout="sizes, prev, pager, next, jumper" :page-sizes="pageSizeList" :page-size="rowSize" :current-page="page" :total="totalRows" @current-change="currentChange" @size-change="handleSizeChange"></el-pagination>
    <!-- table数据展示 end -->

    <!-- 指派负责人 start -->
    <assignPopup v-if="assignDialogVisible" :dialogVisible="assignDialogVisible" :options="taskleaderOptions" @close="assignDialogVisible=false" @save="appointmentSave"></assignPopup>
    <!-- 指派负责人 end -->

    <!-- 确认拣货 start -->
    <picktaskPopup v-if="picktaskPopupVisible" :popupVisible="picktaskPopupVisible" :tasknumber="tasknumber" @shortage="setShortage" @callback="getData" @close="picktaskPopupVisible=false"></picktaskPopup>
    <!-- 确认拣货 end -->

    <!-- 拣货任务明细dialog start -->
    <picktaskDetailPopup v-if="picktaskDetail" :popupVisible="picktaskDetailPopupVisible" :detail="picktaskDetail" :date="createdate" @close="picktaskDetailPopupVisible=false"></picktaskDetailPopup>
    <!-- 拣货任务明细dialog end -->

    <!-- 拣货任务缺货上报dialog start -->
    <picktaskShortagePopup v-if="picktaskShortagePopupVisible" :popupVisible="picktaskShortagePopupVisible" :detail="picktaskShortageDetail"  @callback="getData" @close="picktaskShortagePopupVisible=false"></picktaskShortagePopup>
    <!-- 拣货任务缺货上报dialog end -->
  </div>
</template>
<script>
import common from '@/utils/common'
import { getLodop } from '@/utils/LodopFuncs'
export default {
  name:'picktask',
  data(){
    return {
      formInline:{
        ordercode:'',
        pickingtaskcode:'', // 拣货任务单号
        productspeccode:'', // sku
        state:'', // 状态
        storeordercode:'', //电商订单号
        suppliercode:'', // 供应商条码
        waveordercode:'' // 波次单号
      },
      tableData:[],
      radioChecked:'', // table选中项
      stateOptions:[
        { value:'', label:this.$t('m.all') },
        { value:1, label:this.$t('m.out.state2') },
        { value:2, label:this.$t('m.out.state3') },
        { value:3, label:this.$t('m.out.state6') }
      ],

      assignDialogVisible:false, // 控制指派负责人dialog显示隐藏
      taskleaderOptions:[],

      picktaskPopupVisible:false, // 控制确认拣货dialog显示隐藏
      tasknumber:0,
      picktaskDetail:'', // 拣货订单详情
      picktaskDetailPopupVisible:false, // 控制拣货订单详情dialog显示隐藏
      picktaskShortageDetail:'', // 缺货上报明细
      picktaskShortagePopupVisible:false, // 控制缺货上报dialog显示隐藏
      startpickingdate:'' // 开始拣货时间 ==> 创建时间
    }
  },
  activated(){
    this.getData()
  },
  components:{
    assignPopup:() => import('@/components/common/assign'),
    picktaskPopup:() => import('@/components/picking/picktask-popup'),
    picktaskDetailPopup:() => import('@/components/picking/picktask-detail-popup'),
    picktaskShortagePopup:() => import('@/components/picking/picktask-shortage-popup')
  },
  filters:{
    stateFilter(val, lan){
      let result = ''
      switch (val){
      case 1: result = lan('m.out.state2'); break
      case 2: result = lan('m.out.state3'); break
      case 3: result = lan('m.out.state6'); break
      case 8: result = lan('m.pick.state3');break
      case 9: result = lan('m.pick.state9');break
      case 10: result = lan('m.pick.state10');break
      }
      return result
    },
    pickingtypeFilter(val, lan){
      let result = ''
      switch (val){
      case 1:
        result = lan('m.out.pickingtype1')
        break
      case 2:
        result = lan('m.out.pickingtype3')
        break
      case 3:
        result = lan('m.out.pickingtype4')
        break
      }
      return result
    }
    /* 表格项过滤 end*/
  },
  methods:{
    lan(arg){
      return this.$t(arg)
    },
    search(){
      this.page = 1
      this.getData()
    },
    // 获取指派人list
    appoint(){
      let ids = this.tableRowSelected.length ? this.tableRowSelected[0].pickingtaskid : ''
      if (!ids) return this.callbackMessage(this.$t('m.shelves.choose'))

      let options = {
        method:'get',
        url:'/pickingtask/taskleaders',
        params:{ ids }
      }
      this.$axios(options).then(({ data }) => {
        this.taskleaderOptions = data
        this.assignDialogVisible = true
      })
    },
    print(){
      let LODOP = getLodop()
      if (this.tableRowSelected.length < 1){
        this.$message(this.$t('m.chooseprint') + this.$t('m.pick.tasknumber'))
      } else {
        this.$axios({
          method:'post',
          url:'/printtemplate/query',
          data:{
            ids:[this.tableRowSelected[0].pickingtaskid],
            templateName:'picking'
          }
        }).then(({ data }) => {
          this.printContent = data
          eval(this.printContent)
          LODOP.SET_PRINT_PAGESIZE(1, '50mm', '30mm', '')
          LODOP.PREVIEW()
        })
      }
    },
    getData(){
      let options = {
        method:'get',
        url:'/pickingtask/page',
        params:Object.assign({}, this.formInline, {
          page:this.page,
          rows:this.rowSize
        })
      }
      this.tableLoading = true
      this.$axios(options).then(({ data }) => {
        this.tableData = this.cloneObject(data.records)
        this.totalRows = data.total
        setTimeout(()=>this.tableLoading=false,500)
        if (!this.tableData.length) return this.callbackMessage(this.$t('m.nodata'))
        this.tableData = this.tableData.map(item => {
          if (!('startpickingdate' in item)){
            item.startpickingdate = '---'
          } else {
            item.startpickingdate = common.timestampToTime(
              item.startpickingdate
            )
          }
          if (!('pickingusers' in item)) item.pickingusers = '---'
          if (!('pickinguserid' in item)) item.pickinguserid = 0
          return item
        })
      })
    },
    // 根据拣货任务号查询拣货任务信息
    getPickingtaskData(id){
      let options = {
        method:'get',
        url:`/pickingtask/detail/${id}`
      }
      this.$axios(options).then(({ data }) => {
        this.picktaskDetail = data
        this.picktaskDetailPopupVisible = true
      })
    },
    pickingtaskResult(row){
      let { pickingtaskid, createdate } = row
      // popup弹出层 拣货任务单信息
      this.createdate = createdate
      this.getPickingtaskData(pickingtaskid)
    },
    // 指派任务 保存按钮
    appointmentSave(id){
      if (id === '') return this.callbackMessage(this.$t('m.choose') + this.$t('m.charge'))
      let pickingtaskid = this.tableRowSelected[0].pickingtaskid
      let taskleader = ''
      for (let i = 0;i < this.taskleaderOptions.length;i++){
        if (this.taskleaderOptions[i].userid === id){
          taskleader = this.taskleaderOptions[i].username
          break
        }
      }
      let options = {
        method:'put',
        url:'/pickingtask/assign',
        params:{
          pickingtaskid,
          pickinguserid:id,
          pickingusers:taskleader
        }
      }
      this.$axios(options).then(({ message }) => {
        this.callbackMessage(message, 'success')
        this.assignDialogVisible = false
        this.getData()
      })
    },
    // 缺货上报btn
    setShortage(data){
      this.picktaskShortageDetail = data
      // console.log(this.picktaskShortageDetail)
      this.picktaskShortagePopupVisible = true
    }
  },
  beforeRouteLeave(to, form, next){
    this.assignDialogVisible=false
    this.picktaskPopupVisible=false
    this.picktaskDetailPopupVisible=false
    this.picktaskShortagePopupVisible=false
    next()
  }
}
</script>
<style lang="scss" scoped>
.container ::v-deep .el-select {
  width: 100%;
}
</style>